<template>
  <el-form label-width="80px">
    <el-form-item :label="$t('roleManager.groupUser.leaders')">
      <el-select v-model="leaders" multiple filterable remote :placeholder="$t('placeholder.searchKeywords')"
                 :remote-method="remoteLeaderMethod" :loading="loading">
        <el-option v-for="item in lItems" :key="item.id" :label="item.name" :value="item.id">
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
          <span style="float: left">{{ item.username }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('roleManager.groupUser.members')">
      <el-select v-model="members" multiple filterable remote :placeholder="$t('placeholder.searchKeywords')"
                 :remote-method="remoteMemberMethod" :loading="loading">
        <el-option v-for="item in mItems" :key="item.id" :label="item.name" :value="item.id">
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
          <span style="float: left">{{ item.username }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" v-if="groupManager_btn_userManager" @click="onSubmit">{{$t('button.preserve')}}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    page
  } from '@/api/admin/user/index';
  import {
    getUsers,
    modifyUsers
  } from '@/api/admin/group/index';
  import { mapGetters } from 'vuex';

  export default {
    props: {
      groupId: {
        default: '1'
      }
    },
    data() {
      return {
        lItems: [],
        mItems: [],
        leaders: [],
        members: [],
        list: [],
        loading: false,
        groupManager_btn_userManager: false
      }
    },
    created() {
      this.initUsers();
      this.groupManager_btn_userManager = this.elements['groupManager:btn_userManager'];
    },
    computed: {
      ...mapGetters([
        'elements'
      ])
    },
    methods: {
      remoteMemberMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.loading = false;
          page({
            name: query,
            username: query
          }).then(response => {
            this.mItems = response.data.rows;
            this.total = response.data.total;
            this.loading = false;
          });
        } else {
          this.mItems = [];
        }
      },
      remoteLeaderMethod(query) {
        if (query !== '') {
          this.loading = true;
          this.loading = false;
          page({
            name: query,
            username: query
          }).then(response => {
            this.lItems = response.data.rows;
            this.total = response.data.total;
            this.loading = false;
          });
        } else {
          this.lItems = [];
        }
      },
      onSubmit() {
        const vals = {};
        if (this.members.length > 0) vals.members = this.members.join();
        if (this.leaders.length > 0) vals.leaders = this.leaders.join();
        modifyUsers(this.groupId, vals).then(() => {
          this.$emit('closeUserDialog');
          this.$notify({
            title: this.$('roleManager.groupUser.tips.success'),
            message: this.$('roleManager.groupUser.tips.preserveSuccess'),
            type: 'success',
            duration: 2000
          });
        });
      },
      initUsers() {
        getUsers(this.groupId).then(response => {
          this.lItems = response.data.leaders;
          this.mItems = response.data.members;
          const mems = [], leas = [];
          for (let i = 0; i < response.data.members.length; i++) {
            mems.push(response.data.members[i].id);
          }
          for (let i = 0; i < response.data.leaders.length; i++) {
            leas.push(response.data.leaders[i].id);
          }
          this.members = mems;
          this.leaders = leas;
        });
      }
    }
  }
</script>
